{{ 'agox-page.css' | asset_url | stylesheet_tag }}
<div class="twy-page-performance {% if section.settings.include_margins %}page-width{% endif %}">
  <div class="block-des" id="block_{{ section.id }}">
    <div class="product-with-image fill-width" id="performance-container">
    <div class="product-text performance-container-text">
      <div class="text page-width">
        <div class="product-text__wrapper">
          <span class="text-title">{{ section.settings.heading }}</span>
          <span class="text-icon">{{ section.settings.icon }}</span>
        </div>
      </div>
    </div>
    <div class="bg-image">
      <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image != blank -%}
        <img
          srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
          src="{{ section.settings.image | img_url: '1500x' }}"
          data-src="{{ section.settings.image | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
          class="lazyload"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
      <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image_mobile != blank -%}
        <img
          srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
          src="{{ section.settings.image_mobile | img_url: '990x' }}"
          data-src="{{ section.settings.image_mobile | img_url: '990x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image_mobile.alt | escape }}"
          loading="lazy"
          class="lazyload"
          width="{{ section.settings.image_mobile.width }}"
          height="{{ section.settings.image_mobile.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
    </div>
    <div class="product-desc performance-product">
     <div class="page-width">
       <div class="pos-relative">
        <div class="product-desc__container">
          <div class="product-desc__left">
            <div class="text-desc1">{{ section.settings.paragraphText }}</div>
            {% if section.settings.paragraphTtitle !=blank %}
              <div class="text-title1">{{ section.settings.paragraphTtitle }}</div>
            {% endif %}
          </div>
          <div class="product-desc__right">
            <div class="text-desc2">{{ section.settings.paragraphText2 }}</div>
            {% if section.settings.paragraphTitle2 !=blank %}
              <div class="text-title2">{{ section.settings.paragraphTitle2 }}</div>
            {% endif %}
            <div class="text-desc2">{{ section.settings.paragraphText3 }}</div>
          </div>
        </div>
       </div>
      </div>
    </div>
  </div>
  </div>
</div>

<script>
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }

    function initScrollMagic() {
      const tenwaysBlockDes = document.querySelector("#block_{{ section.id }}");
      const tenwaysAgot = tenwaysBlockDes.querySelector("#performance-container");
      const AgoxController = new ScrollMagic.Controller();
      const tl = new TimelineMax();
      
      tl.fromTo(
        '#block_{{ section.id }} .performance-container-text',
        1,
        {
          autoAlpha: 0,
          opacity: 0
        },
        {
          autoAlpha: 1,
          opacity: 1,
          yPercent: '-40%',
          ease: Linear.easing
        },
      )
      
      tl.fromTo(
        '#block_{{ section.id }} .performance-product .product-desc__container',
        1,
        {
          autoAlpha: 0,
          opacity: 0
        },
        {
          autoAlpha: 1,
          opacity: 1,
          yPercent: '-20%',
          ease: Linear.easing
        },
        "-=1"
      )

      let scene6 = new ScrollMagic.Scene({
        duration: '250',
        triggerElement: tenwaysBlockDes,
        triggerHook: 0
      })
      .setTween(tl)
      .setPin(tenwaysBlockDes)
      .addTo(AgoxController); 
    }

    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( AgoxController !== null && AgoxController !== undefined ) {
          AgoxController = AgoxController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( AgoxController === null || AgoxController === undefined ) {
          initScrollMagic();
        }
      }
    });
  })
</script>

{% schema %}
{
  "name": "Twy Page Performance",
  "tag": "section",
  "class": "background-images",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Mobile image"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "heading",
      "label": "Heading"
    },
    {
      "type": "html",
      "id": "icon",
      "default": "AGO T",
      "label": "Icon"
    },
    {
      "type": "html",
      "id": "paragraphTtitle",
      "label": "Paragraph title"
    },
    {
      "type": "html",
      "id": "paragraphText",
      "label": "Paragraph Text"
    },
    {
      "type": "text",
      "id": "paragraphText2",
      "label": "Paragraph Text2"
    },
    {
      "type": "text",
      "id": "paragraphTitle2",
      "label": "Paragraph Title 2"
    },
    {
      "type": "text",
      "id": "paragraphText3",
      "label": "Paragraph Text 3"
    }
  ],
  "presets": [
    {
      "name": "Twy Page Performance"
    }
  ]
}
{% endschema %}



